﻿@model IEnumerable<IceTea.Domain.Models.Team>

@using IceTea.Domain.Models;
@{
    ViewBag.Title = "Teams";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section LeftNav{
    @Html.Partial("Product_LeftNav", IceTea.Infrastructure.ProductNav.Team)
}


    @if (Model == null || Model.Count() == 0)
    {
        Html.Partial("_ErrorMessage", "There is no team for this product, please ask administrator to create");
    }
    else {
        int i = 1;
        <!-- this hidden field storing the index of active team -->
        @Html.Hidden("teamindex", -1, new { id = "teamindex" });
        
        <div class="col-md-12 panel-group" id="teamaccordion">
        <!-- loop in each team, display the members and join requests -->
        @foreach (Team t in Model)
        {       
            <div class="panel panel-default">    
                <div class="panel-heading">                                        
                    <h4 class="panel-title">
                        <span class="glyphicon glyphicon-globe pull-left">&nbsp;</span> 
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#teamaccordion"
                            href="#collapsecontent@(i)">@t.Name</a>
                        <small>
                             <a class="pull-right" href="#" data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace"
                                 data-ajax-update="#collapsebody@(i)" data-ajax-url="/Product/GetTeamInfo?teamId=@(t.Id)"
                                 id="refresh@(i)">
                                 <span class="glyphicon glyphicon-refresh"></span></a>
                             </small>
                        <span class="pull-right">&nbsp; </span>
                        <small>
                             <a class="pull-right" href="#" onclick="clickjoin(@(t.Id))">Join in 
                             <span class="glyphicon glyphicon-log-in"></span></a></small>
                                                
                    </h4>                   
                </div> 
            
                <div id="collapsecontent@(i)" class="panel-collapse collapse">
                    <div class="panel-body" id="collapsebody@(i)">
                        
                    </div>                    
                </div>
            </div>
            <script type="text/javascript">
                $('#collapsecontent@(i)').on('show.bs.collapse', function () {
                    $('#teamindex').val(@(i));
                    $('#refresh@(i)').click();
                });
            </script>
            i++;
        }
        </div>
    }

<!-- The modal dialog for the join team request, to choose the roles when join team -->
<div class="modal fade" role="dialog" id="joindialog">
    <div class="modal-dialog">
        <div class="modal-content">
            @using(Ajax.BeginForm("RequestJoinTeam", "Product", new AjaxOptions(){
                 HttpMethod="Post",
                 UpdateTargetId="notifycontent",
                 Url=Url.Action("RequestJoinTeam", "Product"), 
                 OnComplete="onJoinComplete"
            })){
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Request to join the team</h4>
            </div>
            <div class="modal-body">
                Please choose your role in this team
                <div class="form-horizontal col-md-12">
                    <div class="checkbox">
                        <label class="col-md-8">@Html.CheckBox("RoleProductOwner") 
                            Product Owner</label>   
                        <hr />                     
                    </div>
                    <div class="checkbox">
                        <label class="col-md-8">@Html.CheckBox("RoleScrumMaster")
                            Scrum Master
                        </label>
                        <hr />                        
                    </div>
                    <div class="checkbox">
                        <label class="col-md-8">@Html.CheckBox("RoleDevelopmentTeam")
                            Development Team
                        </label>
                        <hr />                        
                    </div>
                    <div class="checkbox">
                        <label class="col-md-8">@Html.CheckBox("RoleStakeHolder")
                            Stakeholder
                        </label>     
                        <hr />                   
                    </div>
                    <div class="form-group">
                        @Html.Hidden("TeamId", -1, new { id="teamId"});
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Send Request</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
            }
        </div>
    </div>
</div>

<!-- the notification dialog (after the join team process) -->
<div class="modal fade" role="dialog" id="notifydialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" id="notifycontent">
                <!-- the join team result message will be displayed here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@Scripts.Render("~/bundles/ajax")

<script type="text/javascript">
    function clickjoin(teamid) {
        $('#joindialog').modal('show');
        $('#teamId').val(teamid);
    }

    function onJoinComplete(status) {
        $('#joindialog').modal('hide');
        $('#notifydialog').modal('show');
    }

    function onDealComplete(status) {
        $('#notifydialog').modal('show');
        var index = $('#teamindex').val();
        $('#refresh'+index).click();
    }
</script>
